<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item :name="item.name" v-for="item in list" :key="item.name">
        <!-- 放置标题和开关 -->
        <div
          slot="title"
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          @click.stop.prevent=""
        >
          {{ item.title }}
          <div style="width: 60px; display: flex; align-items: center">
            <i
              :class="[
                'el-icon-arrow-right',
                'rotate-icon',
                { 'rotate-icon-expend': item.status },
              ]"
            ></i>
            <el-switch
              class="my-switch"
              v-model="item.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleSwitchChange(item.name, $event)"
            ></el-switch>
          </div>
        </div>
        <slot :item="item.children">
          <!-- 面板的内容 -->
          <p>{{ item.content }}</p>
          <p>{{ item.content }}</p>
        </slot>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "NestedCollapse", // 定义组件名称
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeNames: [],
      list: [],
    };
  },
  created() {
    this.list = this.items;

    console.log(this.list);
  },
  methods: {
    handleSwitchChange(name, value) {
      if (this.activeNames.includes(name) && !value) {
        this.activeNames = this.activeNames.filter((n) => n !== name);
      } else if (!this.activeNames.includes(name) && value) {
        this.activeNames.push(name);
      }
      console.log(`Switch for panel ${name} changed to ${value}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-collapse-item__header {
  position: relative;
}
.my-switch {
  position: absolute;
  right: 0;
}
::v-deep .el-collapse-item__arrow {
  margin-right: 50px;
  display: none;
}
.rotate-icon {
  transition: all 0.3s;
}
.rotate-icon-expend {
  transform: rotate(90deg);
}
</style>
